var R  = 5;
const  endTime = new  Date(2019,10,29,14,12,40);
var  curTime = getShowTime();
var  drawCircles = [];
var  colors = ["white","orange","blue","red","green","pink","grey"]
window.onload = function () {
    var canvas = document.getElementById("other.canvas");
     context = canvas.getContext("2d");
    curTime = getShowTime();
    setInterval(function () {
        render(context);
        update();

    },50)
}

function update() {
    var nextShowTime =  getShowTime();
    var nextHour =  parseInt(nextShowTime/3600);
    var nextMinute = parseInt(nextShowTime/60);
    var nextSecond = parseInt(nextShowTime%60);

    var  curHour   = parseInt(curTime/3600);
    var curMinute  = parseInt(curTime/60);
    var curSecond  = parseInt(curTime%60);

    if(nextShowTime!=curTime){
        if(parseInt(curHour/10)!=parseInt(nextHour/10)){
            addBalls(0,0,parseInt(curHour/10));
        }
        if(parseInt(curHour%10)!=parseInt(nextHour%10)){
            addBalls(100,0,parseInt(curHour%10));
        }

        if(parseInt(curMinute/10)!=parseInt(nextMinute/10)){
            addBalls(300,0,parseInt(curMinute/10));
        }
        if(parseInt(curMinute%10)!=parseInt(nextMinute%10)){
            addBalls(400,0,parseInt(curMinute%10));
        }

        if(parseInt(curSecond/10)!=parseInt(nextSecond/10)){
            addBalls(600,0,parseInt(curSecond/10));
        }
        if(parseInt(curSecond%10)!=parseInt(nextSecond%10)){
            //console.log("秒改变了。。。。。")
            addBalls(700,0,parseInt(curSecond%10));
        }

        curTime = nextShowTime;
    }

    updateCircles();
}

function  updateCircles() {
    for(var i = 0;i<drawCircles.length;i++){
          drawCircles[i].x = drawCircles[i].x+drawCircles[i].vx;
          drawCircles[i].y = drawCircles[i].y+drawCircles[i].vy;
          drawCircles[i].vy += drawCircles[i].g;
        if(drawCircles[i].y >= 600 - R){
            drawCircles[i].y = 600 - R;
            drawCircles[i].vy = -drawCircles[i].vy* Math.random()*0.8;

        }
        if(drawCircles[i].x < 0 || drawCircles[i].x >1000){
            drawCircles.splice(i, 1);
        }
    }
    console.log("length："+drawCircles.length)
}
function  addBalls(x,y,num) {

    for(var i =0; i<digit[num].length;i++){
        for(var j=0;j<digit[num][i].length;j++){
            if(digit[num][i][j]==1){
                var circle = {
                        x:x+j*2*(R+1)+(R+1),
                        y:y+i*2*(R+1)+(R+1),
                        vx:Math.pow(-1,Math.ceil(Math.random()*1000))*4,
                        vy:0,
                        g:1.5+Math.random(),
                        color:colors[Math.floor(Math.random()*colors.length)]
                };

                    drawCircles.push(circle) ;
                    }
        }

    }
}

function  getShowTime() {

    var  curTime = new Date();
    var res = endTime.getTime() - curTime.getTime();

    res = Math.round(res/1000);

    return res >= 0 ? res:0 ;
}




    function renderDigit(x, y, number, ctx) {
        ctx.fillStyle="orange";
     for(var  i = 0;i<digit[number].length;i++){
        for(var j = 0;j<digit[number][i].length;j++){
            if(digit[number][i][j]==1){
                ctx.beginPath();
                ctx.arc(x+j*2*(R+1)+(R+1),y+i*2*(R+1)+(R+1),R,0,2*Math.PI);
                ctx.closePath();
                ctx.fill();
            }
        }
    }

}

    function  render (ctx) {

       ctx.clearRect(0,0,1000,600);

        var hour = parseInt(curTime/3600);

        var second = parseInt(curTime % 60);

        var minutes = parseInt((curTime - hour*3600)/60);

        renderDigit(0,0,parseInt(hour/10),ctx);

        renderDigit(100,0,parseInt(hour%10),ctx);

        renderDigit(200,0,10,ctx);

        renderDigit(300,0,parseInt(minutes/10),ctx);

        renderDigit(400,0,parseInt(minutes%10),ctx);

        renderDigit(500,0,10,ctx);

        renderDigit(600,0,parseInt(second/10),ctx);

        renderDigit(700,0,parseInt(second%10),ctx);

        for(var i = 0;i<drawCircles.length;i++){
            ctx.beginPath();
            ctx.arc(drawCircles[i].x,drawCircles[i].y,R,0,2*Math.PI,true);
            ctx.fillStyle=drawCircles[i].color;
            ctx.closePath();
            ctx.fill();
        }


    }
